@extends('admin.layouts._menu')
@section('content')
    <div class="container-fluid">
        <form action="{{route('admin.goods.store')}}" method="post">
            @csrf
        <div class="card">
            <div class="card-body">
                <ul class="nav nav-tabs nav-overflow header-tabs">
                    <li class="nav-item">
                        <a href="{{route('admin.goods.index')}}" class="nav-link pb-3">
                            商品列表
                        </a>
                    </li>
                    <li class="nav-item">
                        <a href="{{route('admin.goods.create')}}" class="nav-link pb-3 active">
                            添加商品
                        </a>
                    </li>
                </ul>
            </div>
            <div class="card-body">
                <div class="form-group">
                    <label>商品名称</label>
                    <input type="text" name="title"  class="form-control" placeholder="" aria-describedby="helpId">
                </div>
                <div class="form-group" style="overflow:hidden;">
                    <label>商品图片</label>
                    <button onclick="upImageMul(this)" class="btn btn-default" type="button">选择图片</button>
                    <div id="box"></div>
                </div>
                <div class="form-group">
                    <label>商品价格</label>
                    <input type="text" name="price"  class="form-control" placeholder="" aria-describedby="helpId">
                </div>
                <div class="form-group">
                    <label>商品描述</label>
                    <textarea name="description" class="form-control" rows="5"></textarea>
                </div>
                <div class="form-group">
                    <label>所属分类</label>
                    <div class="row">
                        <select name="category_id[]" class="form-control col-4" id="oneCategory">
                            <option value="">选择商品所属分类</option>
                            @foreach($categorys as $category)
                                <option value="{{$category['id']}}">{{$category['title']}}</option>
                                @endforeach
                        </select>
                        <select name="category_id[]" class="form-control col-4" id="twoCategory">
                            <option value="">选择二级分类</option>
                        </select>
                        <select name="category_id[]" class="form-control col-4" id="threeCategory">
                            <option value="">选择三级分类</option>
                        </select>
                    </div>
                </div>
                <div class="form-group">
                    <label>商品详情</label>
                    <textarea id="container" name="content" style="height:300px;width:100%;"></textarea>
                </div>
                <div class="form-group">
                    <label>是否推荐</label>
                    <div class="form-check">
                        <input class="form-check-input" type="checkbox" value="1" name="is_commend">
                        <label for="is_commend">是</label>
                    </div>
                </div>
            </div>
        </div>
        <div class="card" id="bale">
             <div class="card-header">
                 添加货品
             </div>
             <div class="card-body">
                 <div class="card" v-for="(bale,index) in bales">
                     <div class="card-body">
                         <div class="form-group">
                             <label>货品属性</label>
                             <input type="text" v-model="bale.natures" class="form-control" placeholder="不同货品属性之间用逗号隔开" aria-describedby="helpId">
                         </div>
                         <div class="form-group">
                             <label>货品库存</label>
                             <input type="text" v-model="bale.stock" class="form-control" placeholder="" aria-describedby="helpId">
                         </div>
                         <div class="form-group">
                             <label>附加价格</label>
                             <input type="text" v-model="bale.attach"  class="form-control" placeholder="" aria-describedby="helpId">
                         </div>
                         <button type="button" class="btn btn-danger btn-sm" @click="delBale(index)">删除货品</button>
                     </div>
                  </div>
                 <button type="button" class="btn btn-success btn-sm" @click="addBale()">添加货品</button>
             </div>
            <textarea name="product" id="" cols="30" rows="10">@{{ bales }}</textarea>
             <div class="card-footer text-muted">
                 <button class="btn btn-primary btn-sm">保存数据</button>
             </div>
        </div>
        </form>
    </div>
@endsection
@push('css')
    <style>
        #box img {
            width: 200px;
            float: left;
            margin-right: 10px;
            border: solid 1px #999;
            padding: 10px;
            height: 200px;
        }
    </style>
@endpush
@push('js')
    <script>
        require(['hdjs'],function (hdjs) {
            hdjs.ueditor('container', {hash: 2, data: 'hd'}, function (editor) {
                console.log('编辑器执行后的回调方法1')
            });
        })

        //上传图片
        function upImageMul(obj) {
            require(['hdjs'], function (hdjs) {
                hdjs.image(function (images) {
                    console.log(images)
                    $(images).each(function (k, v) {
                        // 上传成功后,除了往box的盒子里面加图片显示之外,还应该加上input隐藏域,用来提交图片的数据
                        $("<img src='" + v + "'/><input type='hidden' name='picture[]' value='" + v + "'>").appendTo('#box');
                    })
                }, {
                    //上传多图
                    multiple: true,
                })
            });
        }

        // 给一级分类一个改变事件，通过方法找到它的二级分类
        require(['hdjs','jquery'],function (hdjs,$) {
            $('#oneCategory').change(function () {
                // 先清空当前的二级分类数据
                $('#twoCategory').html(' <option value="">选择二级分类</option>');
                var id = $(this).val();
                if (id){
                    $.ajax({
                        url:'/admin/getSonCategory/' + id,
                        method:'get',
                        dataType:'json',
                        success:function (res) {
                            var html = '';
                            $.each(res,function (k,v) {
                                html += '<option value='+v.id+'>'+ v.title +'</option>';
                            })
                            $('#twoCategory').append(html);
                        }
                    })
                }
            })
            // 通过二级分类主键id获取它的子分类
            $('#twoCategory').change(function () {
                // 先清空当前的三级分类数据
                $('#threeCategory').html(' <option value="">选择三级分类</option>');
                var id = $(this).val();
                if (id){
                    $.ajax({
                        url:'/admin/getSonCategory/' + id,
                        method:'get',
                        dataType:'json',
                        success:function (res) {
                            var html = '';
                            $.each(res,function (k,v) {
                                html += '<option value='+v.id+'>'+ v.title +'</option>';
                            })
                            $('#threeCategory').append(html);
                        }
                    })
                }
            })
        })
        // 处理货品添加
        require(['hdjs','vue'],function (hdjs,vue) {
            new vue({
                el:'#bale',
                data: {
                    bales :[],
                },
                methods:{
                    addBale()
                    {
                        var bale = {natures:'',stock:0,attach:0}
                        this.bales.push(bale);
                    },
                    delBale(e)
                    {
                        this.bales.splice(e,1);
                    }
                },
            })
        })
    </script>
@endpush
